<template>
  <div class="mine-container">
    <div class="aside-left">
      <p>我的歌单</p>
      <ul class="mysonglist">
        <li v-for="item in userList" :key="item.id" @click="getSongs(item.id)">
          <img :src="item.coverImgUrl" alt>
          <p>{{item.name}}</p>
          <p>{{item.trackCount}}首</p>
        </li>
      </ul>
    </div>

    <div class="aside-right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 获取用户歌单
import { getUserSonglist } from "@/api";

export default {
  data() {
    return {
      userList: [],
      songlistId: ""
    };
  },
  mounted() {
    this.getusersongs();
  },
  methods: {
    getSongs(data) {
      this.$router.push({ name: "Mysongs", params: { id: data } });
      location.reload();
    },
    getSongsTwo(data) {
      this.$router.push({ name: "Mysongs", params: { id: data } });
    },
    //组件方法
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    // 获取歌单
    getusersongs() {
      let uid = localStorage.getItem("userId");
      getUserSonglist({ uid: uid }).then(res => {
        this.userList = res.data.playlist;
        this.songlistId = this.userList[0].id;
        this.getSongsTwo(this.songlistId);
      });
    }
  }
};
</script>

<style>
.mine-container{
    width: 1200px;
  height: 100%;
  margin: 0 auto;
  color: #333;
  overflow: hidden;
}
.aside-left {
  width: 350px;
  min-height: 800px;
  background: rgb(252, 250, 250);
  float: left;
}
.aside-right {
  width: 800px;
  min-height: 800px;
  /* background: rgb(230, 231, 230); */
  float: left;
}
.aside-left > p {
  font-size: 23px;
  margin: 20px 0;
}
.aside-left .mysonglist li {
  width: 340px;
  height: 60px;
  margin-bottom: 5px;
  cursor: pointer;
}
.aside-left .mysonglist li img {
  width: 60px;
  height: 60px;
  float: left;
}
.aside-left .mysonglist li p {
  width: 240px;
  height: 25px;
  margin-left: 20px;
  margin-top: 6px;
  float: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>